<template>
	<view class="localdetail" v-if="show">
		<u-swiper :list="list" @click="clickSwiper" height="580" imgMode="aspectFit"></u-swiper>
		<!-- <image src="../../static/banner/1.jpg" mode="aspectFit" ></image> -->
		<view class="content relative">
			<view class="mtb-12 pl-36">
				<view class="name">
					【 宠物品种 】：{{petData.pettype}}
				</view>
				<view class="name">
					【 走失时间 】：{{petData.date}}
				</view>
				<view class="name">
					【 走失地点 】：{{petData.address}}
				</view>
				<view class="name">
					【 目前状态 】：{{petData.isfound == 0 ? '未找到':'已找到'}}
				</view>
				<view class="money" v-if="petData.money">
					【 悬赏金额 】：{{petData.money}} 元
				</view>
			</view>
			<view class="detailbox">
				详情描述 :{{petData.note}}
			</view>
			<view class="section">
				<view class="text">
					评论区
				</view>
				<block  v-if="petData.sessionList">
					<!-- <view class="flex relative" style="margin: 12rpx;" v-for="(item,idx) in petData.sessionList" :key="idx">
						<view class="avater">
							<image src="../../static/logo.png" mode="" style="width: 100%;height: 100%;"></image>
						</view>
						<view class="flex col">
							<view class="name">
								{{item.username}}
							</view>
							<view class="talk">
								{{item.talk}}
							</view>
						</view>
						<view class="dates absolute" style="right:0;top:-2rpx;white-space: nowrap;">
							{{item.date}}
						</view>
					</view> -->
					<sectioncom :list="petData.sessionList"></sectioncom>
				</block>
			</view>
			<view class="metalk flex bt">
				<input type="text" class="input" placeholder="我来说两句" confirm-type="send" :value="text" @confirm="sendMsg" />
				<view style="width: 200rpx;padding-top: 10rpx;">
					<u-button type="warning" text="联系它主人" @click="concat"></u-button>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import sectioncom from "../section/section.vue"
	export default {
		data() {
			return {
				list: [
					// '../../static/banner/1.jpg',
					// '../../static/banner/2.jpg',
					// '../../static/banner/3.jpg',
				],
				text: "",
				show: false,
				petData: {
					// address: "山东省济宁市金乡县"
					// date: "2024-08-05"
					// emergent: "1"
					// money: "19999"
					// note: "腿短"
					// openid: "oBiar5NSgldQsAPtf8wW6cvkw3wM"
					// pettype: "柯基"
					// reward: "1"
					// swiperList: ["cloud://animal-4g5ks6ct0e7f251e.616e-animal-4g5ks6…/qedaplmoVecmf2a01c82033b81d949d1ff5d0d03ae34.png"]
					// tcbContext: {}
					// tel: "1889886757"
					// uploadDate: "2024-10-07 17:59:21"
					// userInfo: {appId: "wxd0a5700b5115b932", openId: "oBiar5NSgldQsAPtf8wW6cvkw3wM"}
					// username: "荟"
					// _id: "2ad666ce66b45ff005ff073646868437",
					sessionList: []
				}
			};
		},
		onLoad(props) {
			// console.log(props)
			this.getDetail(props.id)
		},
		methods: {
			clickSwiper(e) {
				// console.log(this.list[e])
				uni.previewImage({
					urls: this.list,
				})
			},
			sendMsg(e) {
				this.text = e.detail.value
				// console.log(this.text.length, 'text')
				if (this.text.length > 25) {
					this.$refs.uToast.show({
						type: 'error',
						message: "字数不能大于25",
					})
				}
				let noReg = uni.getStorageSync("noReg")
				if(!noReg){
					uni.navigateTo({
						url: "/subpack/regist/regist"
					})
					return
				}
				wx.cloud.callFunction({
					name: 'logins',
					data: {
						useName: 'postSession',
						id: this.petData._id,
						talk: this.text,
						date: this.$formatDateTime(new Date(), 1)
					}
				}).then(res => {
					// console.log("sendMsg:", res.result)
					this.text = ''
					this.getDetail(this.petData._id)
					// this.localData = res.result.data
				})
			},
			concat() {
				let callNum = uni.getStorageSync('quotaLeft')
				if (callNum ==0) {
					uni.showToast({
						mask: true,
						icon:"error",
						title: "今日次数已用尽"
					})
					return
				}
				uni.showModal({
					title: '提示',
					content: '每天仅可拨打2次',
					success: (res) => {
						if (res.confirm) {
							// console.log('用户点击确定');
							uni.makePhoneCall({
								phoneNumber: this.petData.tel, //仅为示例
								success: (res) => {
									// console.log("拨打了电话", res)
									callNum--
									uni.setStorageSync('quotaLeft', callNum)
								}
							});
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			},
			getDetail(id) {
				wx.cloud.callFunction({
					name: 'logins',
					data: {
						useName: 'getPetDetail',
						id,
					}
				}).then(res => {
					// console.log("getLostPetDEtail:", res.result)
					this.list = res.result.swiperList
					this.petData = res.result
					this.petData.sessionList = res.result.session
					this.show = true
					// this.localData = res.result.data
				})
			}
		},
		components:{
			sectioncom
		}
	}
</script>

<style lang="scss">
	.localdetail {
		.content {
			background-color: $uni-color-primary;
			border-radius: $uni-border-radius-lg;
			color: white;
			min-height: 800rpx;
			padding: $uni-spacing-row-base;

			.name,
			.date {
				font-weight: 600;
				font-size: $uni-font-size-base;
			}

			.money {
				color: $uni-text-color-yellow;
			}

			.detailbox {
				margin-top: $uni-spacing-row-base;
				padding: $uni-spacing-row-base;
				background-color: white;
				color: #000;
				font-weight: 600;
				border-radius: $uni-border-radius-lg;
				min-height: 200rpx;
				max-height: 600rpx;
				overflow-y: auto;
			}

			.section {
				.text {
					font-size: $uni-font-size-lg;
					margin-top: $uni-spacing-row-base;
					font-weight: 600;
				}

				.box {
					min-height: 200rpx;
					max-height: 600rpx;
					overflow-y: auto;
					background-color: white;
					border-radius: $uni-border-radius-lg;
					margin-top: $uni-spacing-row-base;
					padding: $uni-spacing-row-base;
					color: #000;

					.avater {
						width: 85rpx;
						height: 85rpx;
					}

					.name {
						font-weight: normal;
						font-size: $uni-font-size-sm;
						margin-left: 20rpx;
						height: auto;
					}

					.talk {
						// vertical-align: middle;
						line-height: 85rpx;
						margin-left: 20rpx;
						background-color: #f4f4f4;
						position: relative;
						padding: 2rpx 16rpx;
						// overflow: hidden;
						text-overflow: ellipsis;
						max-width: 380rpx;

						&::after {
							position: absolute;
							content: "";
							top: 25rpx;
							/* 调整三角形的位置 */
							left: -26rpx;
							/* 让三角形居中 */
							width: 0;
							height: 0;
							border-left: 15rpx solid transparent;
							border-right: 15rpx solid #f4f4f4;
							border-top: 15rpx solid transparent;
							border-bottom: 15rpx solid transparent;
							/* 更改底部边框为红色，形成向上指向的三角形 */
							transform: rotate(45);
						}
					}
				}
			}

			.metalk {
				margin: $uni-spacing-col-lg $uni-spacing-col-sm;
				align-items: center;

				.input {
					background-color: white;
					color: #000;
					height: 100rpx;
					padding-left: 24rpx;
					border-radius: $uni-border-radius-base;
				}
			}
		}
	}
</style>